﻿<%@ Page Title="" Language="C#" MasterPageFile="~/PIMMobile.master" AutoEventWireup="true"
    CodeFile="GroceryList.aspx.cs" Inherits="GroceryList" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/themes/sunny/jquery.ui.theme.css" />
    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/themes/sunny/jquery.ui.all.css" />
    <link rel="stylesheet" type="text/css" href="Styles/popupprint.css" />
    
    <script type="text/javascript" src="Scripts/popupprint.js"></script>
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            GetRecipeIngredientUser();
            GetRecipeIngredientUserRecipeView();
            GetRecipeIngredientUserByDeptView();

            $(".divIngredient").live('click', function () {
                if (confirm('Do you want to delete this ingredient?')) {
                    $(this).remove();
                }
                $('.divRecipe').unbind('click', handler);
            });

            $(".divRecipe").live('click', function () {
                if (confirm('Do you want to delete all ingredient of this recipe?')) {
                    var currentId = $(this).attr('id');
                    //document.getElementById('inputRecipeId').value = document.getElementById('inputRecipeId').value.replace(',' + currentId, '');
                    //GetRecipeIngredientUserRemoveRecipe();
                    $(this).parent().remove();
                    //loadRecipesByRecipeId(currentId);
                }
            });
        });

        function BindGredientDept(response, IngredientName) {
            var Ingredient = response.d;

            $('#divIngredientList').html('');
            for (var i = 0; i < Ingredient.length; i++) {
                var GroDept = Ingredient[i].GroDept;
                var Image = '';

                $.ajax({
                    type: "POST",
                    url: "PIMServices.asmx/getIngredientDeptDetail",
                    data: "{'ingredientName':'" + IngredientName + "','GroDept':'" + GroDept + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        var IngredientDetail = result.d;
                        var grodpt = IngredientDetail[0].GroDept
                        html = '<div>';
                        html += '<div style="text-align:justify;background-color:#808080;">';
                        html += '<img src="data:image/jpeg;charset=utf-8;base64,' + Image + '" style="vertical-align:middle;display: inline-block; height:40px; width:40px">';
                        html += '&nbsp;&nbsp;<b>' + grodpt + '</b>&nbsp;&nbsp;';
                        html += '</img>';
                        html += '</div>';

                        html += '<div>';

                        for (var j = 0; j < IngredientDetail.length; j++) {
                            var ingre = IngredientDetail[j].ingre;
                            html += '<p style="text-align:left" >' + ingre + '</p>';

                        }
                        html += '</div>';
                        html += '<hr></hr>';
                        html += '</div>';
                        $('#divIngredientList').append(html);

                    },
                    error: function (result) {
                        alert('Error');
                    }
                });

            }

        }

        function ShowIngredientDept(IngredientName) {
            $.ajax({
                type: "POST",
                url: "PIMServices.asmx/getIngredientDept",
                data: "{'ingredientName':'" + IngredientName + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    $('#divGroceryOther').css({ display: 'inherit' });
                    BindGredientDept(response, IngredientName);
                    BingGredientDeptPrint(response, IngredientName);
                },
                error: function (response) {
                    alert('Error');
                }
            });
        }

        function GetRecipeIngredientUserByDeptView() {
            $('.li02').click(function () {
                $('#divIngredientList').css({ display: 'inherit' });
                $('#divGrocery').css({ display: 'none' });
                $('#divGroceryOther').css({ display: 'inherit' });
                $('#printIngredient').css({ display: 'inherit' });
                $('#printGroceryList').css({ display: 'none' });
                

                var IngredientName = $('#takeIngredient').val() + document.getElementById('inputIngredient').value;
                ShowIngredientDept(IngredientName);

            });
        }

        function GetRecipeIngredientUser() {
            $('.li01').ready(function () {
                var ReiceIdSession = '<%=Session["RecipeId"]%>';

                var RecipeIDList = ReiceIdSession.split(',');
                document.getElementById('inputIngredientEmail').value = '';
                

                var html = '';
                $('#divGrocery').html(html);
                $('#divGroceryPrint').html(html);
                $.each(RecipeIDList, function (key, RecipeIDList) {
                    var Recipe = RecipeIDList.split(' ');
                    var serving = $('#txtServing').val();
                    var data = "";
                    var url = "";
                    if (serving != "") {
                        url = "PIMServices.asmx/getRecipeIngredientUserByRecipeIDServing";
                        data = "{'RecipeID':'" + Recipe + "','Serving':'" + serving + "'}";
                    }
                    else {
                        url = "PIMServices.asmx/getRecipeIngredientUserByRecipeID";
                        data = "{'RecipeID':'" + Recipe + "'}";
                    }
                    if (Recipe != "") {
                        $.ajax({
                            type: "POST",
                            url: url,
                            data: data,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (response) {
                                $('#divGroceryOther').css({ display: 'block' });
                                BindRecipeIngredientUser(response, html);
                                BindRecipeIngredientUserForPrint(response, html);
                            },
                            error: function (response) {
                                alert('Error');
                            }
                        });
                    }
                });
            });
        }

        function GetRecipeIngredientUserRecipeView() {
            $('.li01').click(function () {
                $('#divGroceryPrint').html('');
                
                ShowRecipeIngredientUserRecipeView();
            });
        }

        function ShowRecipeIngredientUserRecipeView() {
            var ReiceIdSession = '<%=Session["RecipeId"]%>';
            
            var RecipeIDList = ReiceIdSession.split(',');
            $('#takeIngredient').val('');
            $('#divIngredientList').css({ display: 'none' });
            $('#divGrocery').css({ display: 'inherit' });

            $('#printIngredient').css({ display: 'none' });
            $('#printGroceryList').css({ display: 'inherit' });


            var html = '';
            $('#divGrocery').html(html);
            $.each(RecipeIDList, function (key, RecipeIDList) {
                var Recipe = RecipeIDList.split(' ');
                if (Recipe != "") {
                    var serving = $('#txtServing').val();
                    var data = "";
                    var url = "";
                    if (serving != "") {
                        url = "PIMServices.asmx/getRecipeIngredientUserByRecipeIDServing";
                        data = "{'RecipeID':'" + Recipe + "','Serving':'" + serving + "'}";
                    }
                    else {
                        url = "PIMServices.asmx/getRecipeIngredientUserByRecipeID";
                        data = "{'RecipeID':'" + Recipe + "'}";
                    }
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: data,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            $('#divGroceryOther').css({ display: 'block' });
                            BindRecipeIngredientUser(response, html);
                            BindRecipeIngredientUserForPrint(response, html);
                        },
                        error: function (response) {
                            alert('Error');
                        }
                    });
                }
            });
        }

        function BindRecipeIngredientUser(response, html) {
            var RecipeIngredient = response.d;
            var RecipeName = RecipeIngredient[0].RecipeName;
            var RecipeId = RecipeIngredient[0].RecipeID;
            var Serving = RecipeIngredient[0].Serving;


            html += '<section>';
            html += '<div id="' + RecipeId + '" class="divRecipe">';

            html += '<div style="text-align:justify;background-color:#808080;">';
            html += '<img src="data:image/jpeg;charset=utf-8;base64,' + RecipeIngredient[0].RecipeImage + '" style="vertical-align:middle;display: inline-block; height:40px; width:40px">';
            html += '&nbsp;&nbsp;<b>' + RecipeName + '</b>&nbsp;&nbsp; Serv: ' + Serving;
            html += '</img>';
            html += '<div style="height:40px;float:right;"><img src="images/img05.jpg" id="imgRemove" alt="" style="display: inline-block;padding:15px 0;" width="20" height="3"></div>';
            html += '</div>';
            for (var i = 0; i < RecipeIngredient.length; i++) {
                var RecipeIngerdientId = RecipeIngredient[i].RecipeIngredientUserID;
                var RecipeIngredientUserName = RecipeIngredient[i].IngredientName;
                var RecipeImage = RecipeIngredient[i].RecipeImage;
                html += '<div id="' + RecipeIngerdientId + '" class="divIngredient">';
                html += '<a>'
                html += '<img src="images/img05.jpg" alt="" style="float:right;display: inline-block;padding:4px 0;" width="20" height="3">';
                html += '</img>' + RecipeIngredientUserName;
                html += '<a>'
                html += '</div>';
                document.getElementById('takeIngredient').value += RecipeIngredientUserName + '+';
            }
            html += '<hr></hr>';
            html += '</div>';
            html += '</section>';
            $('#divGrocery').append(html);
        }

        function BindRecipeIngredientUserForPrint(response, html) {
            var RecipeIngredient = response.d;
            html += '<div>';
            var RecipeName = RecipeIngredient[0].RecipeName;

            html += '<div style="text-align:left; margin:auto;"><div>' + RecipeName + '</div>';

            for (var i = 0; i < RecipeIngredient.length; i++) {
                var RecipeIngerdientId = RecipeIngredient[i].RecipeIngredientUserID;
                var RecipeIngredientUserName = RecipeIngredient[i].IngredientName;
                var RecipeImage = RecipeIngredient[i].RecipeImage;
                document.getElementById('inputIngredientEmail').value += RecipeIngredient[i].IngredientName + '_';

                html += '<div id="' + RecipeIngerdientId + '">';
                html += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="text-align:left" >';
                html += '<input id="chkCheckExists' + i + '" type="checkbox" onclick="javascipt:removecheckbox(this.value,this.id)" checked="checked" value="' + RecipeIngredientUserName + '"/>' + RecipeIngredientUserName;
                html += '</a>';
                html += '</div>';
            }

            html += '</div>';
            html += '<hr></hr>';

            $('#divGroceryPrint').append(html);
        }

        function BingGredientDeptPrint(response, IngredientName) {
            var Ingredient = response.d;

            $('#divIngredientPrint').html('');
            for (var i = 0; i < Ingredient.length; i++) {
                var GroDept = Ingredient[i].GroDept;
                var Image = '';

                $.ajax({
                    type: "POST",
                    url: "PIMServices.asmx/getIngredientDeptDetail",
                    data: "{'ingredientName':'" + IngredientName + "','GroDept':'" + GroDept + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        //                        var html = "";
                        var IngredientDetail = result.d;
                        var grodpt = IngredientDetail[0].GroDept
                        html = '<div>';
                        html += '<div>' + grodpt + '</div>';
                        html += '<div>';

                        for (var j = 0; j < IngredientDetail.length; j++) {
                            var ingre = IngredientDetail[j].ingre;
                            html += '<p style="text-align:left" >';
                            html += '<input id="chkCheckExists' + j + '" type="checkbox" checked="checked" onclick="javascipt:removecheckbox(this.value,this.id)" value="' + ingre + '"/>' + ingre;
                            html += '</p>';
                            document.getElementById('inputIngredientEmail').value += IngredientDetail[j].ingre + '_';
                        }
                        html += '</div>';
                        html += '<hr></hr>';
                        html += '</div>';
                        $('#divIngredientPrint').append(html);
                    },
                    error: function (result) {
                        alert('Error');
                    }
                });

            }
        }

    </script>

    <div class="beta">
        <div class="bg01 clearfix">
                Grocery List
        </div>
        <div style="">
            <h4>
                Serving:<input id="txtServing" style="width: 120px" />
                </h4>
        </div>
        <div class="box03 clearfix">
            <div class="pad10">
                <ul class="ul01">
                    <li style="width:37px; float:left;">
                        <img class="account" src="images/img04.jpg" alt="" width="24" height="24" /></li>
                    <li class="li01">
                        <img class="account" src="images/icon02.jpg" width="24" height="24"  />
                        <a id="liRecipe" href="#">Recipe View</a></li>                
                    <li class="li02" >
                         <img class="account" src="images/icon01.jpg" width="24" height="24" />
                        <a id="liDepart" style="vertical-align:middle;" href="#">Depart View</a>
                    </li>
                </ul>
            </div>
            <div style="clear:both"></div>
            <%--<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" ></asp:ScriptManager>--%>
            <div class="col-2">
                <div class="dropdown">
                    <a class="account" id="acc" style="display: none;"><span>Share</span> </a>
                    <div class="submenu" style="display: none;">
                        <ul class="root">
                            <li>
                                <asp:Label ID="labelSteps_1_2" runat="server" Text=""></asp:Label>
                            </li>
                        </ul>
                    </div>
                </div>
            
                <div id="trash" class="ui-widget-content ui-state-default" style="overflow: auto;
                    width: 100%; height: 340px; padding-top: 0px; top: 0px; background: #f7f7f7">
                    <div id="groceryList">
                        <div class="grocery_header">
                            <div class="glocery_bg">
                                <div class="txt_box">
                                    <input name="addGlocery" id="txtGlocery" type="text" onfocus="javascript: if(this.value == 'Add item here'){ this.value = ''; }"
                                        onblur="javascript: if(this.value==''){this.value='Add item here';}" value="Add item here"
                                        size="29" /></div>
                                <div class="btn_Insert">
                                    <img src="images/save.gif" alt="" width="23" height="18" /></div>
                            </div>
                            <div style="clear:both"></div>
                            <div id="divGroceryOther" style="float: right">
                            </div>
                            <div id="divGrocery" style="">
                            </div>
                            <div id="divIngredientList" style="float: right;">
                            </div>
                            <div id="divGroceryPrint" class="popup">
                                <%--<div style="float:right">
                                    <img src="images/icon-print-preview.png" onclick="window.print();"  />
                                </div>--%>
                                <%--<input type="button" value="Print this Page" onclick="window.print();"><img src="images/icon-print-preview.png" onclick="window.print();"  />--%>
                            </div>
                            <div id="divIngredientPrint" class="popup">
                            </div>
                        </div>
                    </div>
                </div>
                <a id="printIngredient" style="display: none" title="Print with ingredient" onclick="openpopup('divIngredientPrint')">
                    <img src="images/icon-print.png" style="float: right" alt="" width="30" height="30"/></a>
                <a id="printGroceryList" style="display: inherit" title="Print with grocery list"
                    onclick="openpopup('divGroceryPrint')">
                    <img src="images/icon-print.png" style="float: right" alt="" width="30" height="30"/></a>
                
                <div id="bg" class="popup_bg">
                </div>
            </div>
        </div>
    </div>
    <input id="inputRecipeId" type="hidden" />
    <input id="takeIngredient" type="hidden" />
    <input id="inputIngredient" type="hidden" />
    <input id="inputIngredientEmail" type="hidden" />
</asp:Content>
